<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<span>本例我们使用v-for指令来绑定列表<br/>同时还测试对列表的操作</span>
		<ul>
			<li v-for="row in rows">{{row.name}}</li>
		</ul>
		
		<p>v-for指令支持一个可选的第二个参数用于指定当前项的索引</p>
		<ul>
			<li v-for="(row, index) in rows">
				<!--
                	作者：411370875@qq.com
                	时间：2017-06-22
                	描述：你可以发现，索引是从0开始的
                -->
				序号：{{index + 1}}
				键值：{{row.name}}
			</li>
		</ul>
		
		<p>你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：</p>
		<ul>
			<li v-for="row of rows">{{row.name}}</li>
		</ul>
		
		<p>内层内容循环:</p>
		<template v-for="(row, index) of rows">
			<p>
				序号：{{index + 1}}
				<br/>
				键值：{{row.name}}
			</p>
		</template>
		
		<p>对象迭代：</p>
		<ul>
			<li v-for="(val, key) in user">
			{{key}}：{{val}}
			</li>
		</ul>
		
		<p>对象迭代支持第三个参数作为索引，但是由于对象属性的无序性，故不能保证它的结果在不同的 JavaScript 引擎下是一致的。：</p>
		<ul>
			<li v-for="(val, key, index) in user">
			序号：{{index}}
			<br/>
			{{key}}：{{val}}
			</li>
		</ul>
		
		<p>整数迭代(从1到n)：</p>
		<ul>
			<li v-for="nidx in 10">这是第{{nidx}}个</li>
		</ul>
		
		<span>本例我们用于测试for指令不会自动传递参数到组件内部，需要组件自己绑定。<br/></span>
		<!--
        	作者：411370875@qq.com
        	时间：2017-06-22
        	描述：当服务于组件时，for指令最好显式指定key
        -->
		<vue-item v-for="(val, name) of courses" key="name" v-bind:type="name" v-bind:items="val"></vue-item>
	</div>
</body>
<script type="text/javascript">
//组件必须有且仅有一个root
Vue.component('vue-item', {
	props: ['type', 'items'],  //props定义支持的参数绑定
	template: '<div><p>类型：{{type}}</p><ul><li v-for="item in items">{{item.name}}</li></ul></div>'
});
var app = new Vue({
	el: '#app',
	data: {
		show: true,
		rows: [
			{name: "高等数学"},
			{name: "大学英语"},
			{name: "心理教育"}
		],
		user: {
			name: "陈峰展",
			sex: "男",
			age: 28,
			money: 12457.85
		},
		courses: {
			'必修': [
				{name: "高等数学"},
				{name: "大学英语"},
				{name: "心理教育"}
			],
			'选修': [
				{name: "时事政治"},
				{name: "乱七八糟"},
				{name: "研读三国"}
			]
		}
	}
});
window.setTimeout(function(){
	app.rows.push({name: "新增教学"});
}, 3000);
</script>
</html>
